<template>

	<view class="content">
		<view class="boxs" v-if="flags">
			<view class="seconds">
				<view class="" style="padding: 20rpx;background-color: #ffffff;border-radius: 10rpx;">
					<view class="" style="font-size: 28rpx;margin-top: 10rpx;margin-left: 12rpx;">
						话费充值
					</view>
					<view class="phone">
						<input type="number" v-model="mobile" maxlength="11" style="font-size: 40rpx;font-weight: bold;height: 80rpx;" placeholder="请输入电话号码"></input>
						<u-line color="#535353"></u-line>
					</view>
					<view class="colu">
						<view v-for="(item,index) in money" :key="index"
							style="width: 32%;border-radius: 11rpx;background-color: #F7F7F7;margin-top: 30rpx;height: 120rpx;"
							@click="check(item)"
							:class="item.check==true ? 'd_f j_c_c a_i_c f_c_c checks' : 'd_f j_c_c a_i_c f_c_c'">
							<view class="" v-if="item.new!=''" style="position: absolute;">
								<view class="t_a_c" style="color: #010101;font-size: 40rpx;">
									{{item.old}}元
								</view>
								<view class="" style="height: 10rpx;">

								</view>
								<view class="t_a_c" style="">
									<text style="color:#333333 ;">售价：</text> <text
										style="color: #FF0D0D;">{{item.new}}</text><text style="color:#333333 ;">元
									</text>
								</view>
							</view>
							<view class=""
								style="text-align: center;line-height: 120rpx;position: absolute;color:#333333" v-else>
								更多面额
							</view>
							<!-- #ifdef  MP-ALIPAY  -->
												
														<button v-if="mobile==''&&time==0"  class="login" type="default" open-type="getAuthorize" @getAuthorize="onGetAuthorize" @error="onAuthError" scope='phoneNumber' style="width: 100%;height: 100%;z-index: 2;opacity: 0;"></button>
													
												<view class="" v-else>
												
												</view>
												<!-- #endif -->

						</view>

					</view>

				</view>

			</view>


		</view>
		<view class="" v-if="flag==0">

		</view>
		<view class="" v-if="flag==1" style="width: 100%;height: 100rpx;position: fixed;bottom: 0;" @click="change">
			<view class="d_f j_c_c a_i_c f_c_c" style="width: 100%;height: 100rpx;background: #1677FE;color: #ffffff;">
				原价充值
			</view>
		</view>
		<view class="" v-if="flag==2">
			<view class="" style="width: 100%;height: 100rpx;position: fixed;bottom: 0;right: 0;">
				<alls onRenderSuccess="onRenderSuccess" onRenderFail="onRenderFail" onBeforeJump="onBeforeJump"></alls>
			</view>
			<view class="d_f" style="position: fixed;width: 50%;bottom: 0;left: 0;" @click="change" v-show="shows">
				<view class="d_f j_c_c a_i_c f_c_c"
					style="width: 100%;height: 100rpx;background: #1677FE;color: #ffffff;">
					原价充值
				</view>

			</view>
		</view>

		<view class="" style="position: fixed;bottom: 0;height:calc(100% - 518rpx);overflow-y: auto;">
			<new onAdInstance="onAdInstance" onAdError="onAdError" onAdLoad="onAdLoad"></new>
		</view>


	</view>
</template>

<script>
	import {
		wxLogin,
		openSignDecrypt,
		getBanner,
		shenhe
	
	} from '../../api/index.js'
	let pluginIns;
	export default {
		data() {
			return {
				time:'0',
				ad: null,
				openid:'',
				mobile: '',
				flag: '0',
				flags: '',
				shows: false,
				money: [{
						old: 30,
						new: 25,
						check: false,
						id: '1'
					},
					{
						old: 50,
						new: 45,
						check: false,
						id: '2'
					},
					{
						old: 100,
						new: 95,
						check: false,
						id: '3'
					},

					{
						old: 200,
						new: 195,
						check: false,
						id: '4'
					},
					{
						old: 300,
						new: 295,
						check: false,
						id: '5'
					},
					{
						old: "",
						new: "",
						check: false,
						id: '6'
					}
				],
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: "加载中",
				mask: true
			})

			this.mobile = option.mobile
			this.$scope.onAdInstance = this.onAdInstance.bind(this)
			this.$scope.onAdLoad = this.onAdLoad.bind(this)
			this.$scope.onAdError = this.onAdError.bind(this)
			this.$scope.onRenderFail = this.onRenderFail.bind(this)
					this.$scope.onRenderSuccess = this.onRenderSuccess.bind(this)
				
					this.$scope.onBeforeJump = this.onBeforeJump.bind(this)


		},
		methods: {
				onRenderSuccess() {
						console.log("加载成功")
					},
				
					onBeforeJump() {
						return new Promise((resolve) => {
							resolve(true); // 必须
						});
					},
			onAuthError(err){
			      console.log(err)
				  this.time=1
			      },
			onGetAuthorize() {
				uni.showLoading({
					title:"授权中",
					mask:true
				})
				my.getPhoneNumber({
				    success: (res) => {
				        let encryptedData = res.response;
						console.log(encryptedData)
						openSignDecrypt({
							encryptedData:JSON.parse(encryptedData).response
						}).then((resx)=>{
							console.log(resx)
							uni.hideLoading()
							this.time=1
							uni.setStorageSync('mobile', resx.data.mobile)
							uni.setStorageSync('openid', resx.data.openid)
							this.mobile=resx.data.mobile
							this.openid=resx.data.openid
						})
				     
				    },
				    fail: (res) => {
				        console.log(res);
						uni.hideLoading()
				        console.log('getPhoneNumber_fail');
				    },
				});
			
				
			},
			check(e) {

				for (var i in this.money) {
					if (this.money[i].id == e.id) {
						this.money[i].check = !this.money[i].check
					} else {
						this.money[i].check = false
					}
				}
				// console.log(this.money)

			},
			change() {
				let link = "https://render.alipay.com/p/s/i/?scheme=" + encodeURIComponent(
					"alipayqr://platformapi/startapp?saId=10000003")

				my.ap.navigateToAlipayPage({
					path: link
				})
			},
			onAdInstance: (ins) => {
				console.log(ins, "onAdInstance")
				pluginIns = ins

			},
			//banner报错
			onRenderFail(err) {
				console.log(err, 666666)
				this.flag = 1
				uni.hideLoading()
			},
			//勾选报错
			onAdError(err) {
				console.log(err, 789456)

				setTimeout(() => {
					this.flag = 2
					this.flags = true
					// this.shows = true
					uni.hideLoading()
				}, 400);
				setTimeout(() => {
					this.shows = true
					uni.hideLoading()
				}, 400);


			},

			onAdLoad() {
				console.log(this.flag)

				if (pluginIns) {
					console.log('show')
					pluginIns.show({
						spaceCode: '50_2023110725000069504',
						//全屏50_2023110725000069520
						rtaExtMap: {
							organization_type: 'hospital',
							organization_sub_type: 'general_hospital',
							device_location: 'outpatient_department',
							device_id: '111111',
							public_opinion_level: 'low_risk',
							touch_point_location: 'index',
							touch_point_type: 'full_screen',
							insurance_scene_code: 'ma_shang_distribution_sale'
						},
					});
				}
				this.flag = 2
				setTimeout(() => {
					this.flags = true

					uni.hideLoading()
				}, 700);
				setTimeout(() => {
					this.shows = true
					uni.hideLoading()
				}, 400);



			}
		}
	}
</script>
<style scoped lang='scss'>
	.seconds {
		width: 688rpx;

		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		padding: 0 10rpx 20rpx 10rpx;
	}

	.boxs {
		background-image: url('../../static/bax.png');
		background-size: 100% 100%;
		padding: 20rpx 0 0 0;
	}

	.content {
		height: 100%;
		overflow-y: hidden;

	}

	.colu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.phone {

		font-size: 50rpx;
		margin-top: 10rpx;
		font-weight: 500;
		color: #000000;
	}

	.checks {
		border: 1px solid #2881FD;
	}
</style>